<template>
  <view class="container">
    <!-- 顶部日期选择 -->
    <view class="date-header">
      <text class="current-date">{{ currentDate }}</text>
      <view class="calendar-btn" @tap="showCalendar">
        <image src="/static/icons/calendar.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 日历按钮 - 修改后的代码 -->
    <view class="calendar-float-btn" @tap="goToCalendar">
      <image src="/static/icons/calendar-icon.png" mode="aspectFit"></image>
    </view>

    <!-- 时间轴列表 -->
    <scroll-view class="timeline-list" scroll-y>
      <view class="timeline-item" v-for="(item, index) in timelineData" :key="index">
        <!-- 时间点 -->
        <view class="time-point">
          <text class="time">{{ item.time }}</text>
          <view class="point"></view>
          <view class="line" v-if="index !== timelineData.length - 1"></view>
        </view>
        
        <!-- 内容卡片 -->
        <view class="content-card">
          <view class="card-header">
            <text class="title">{{ item.title }}</text>
            <text class="location">{{ item.location }}</text>
          </view>
          <view class="card-content">
            <text class="description">{{ item.description }}</text>
          </view>
          <view class="card-footer">
            <view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">
              {{ tag }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 添加按钮 -->
    <view class="add-btn" @tap="handleAdd">
      <text class="plus">+</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const currentDate = ref('2024年3月21日')

const timelineData = ref([
  {
    time: '09:00',
    title: '晨跑',
    location: '中央公园',
    description: '今天天气不错,跑了5公里',
    tags: ['运动', '健康']
  },
  {
    time: '11:30',
    title: '工作会议',
    location: '公司会议室',
    description: '讨论了新项目的进展',
    tags: ['工作', '会议']
  },
  {
    time: '14:00',
    title: '午休',
    location: '办公室',
    description: '小憩30分钟',
    tags: ['休息']
  }
])

const showCalendar = () => {
  // 显示日期选择器
  uni.showDatePicker({
    success: (res) => {
      currentDate.value = formatDate(res.date)
    }
  })
}

const handleAdd = () => {
  uni.navigateTo({
    url: '/pages/add/index'
  })
}

const formatDate = (date) => {
  // 格式化日期
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

const goToCalendar = () => {
  console.log('点击日历按钮') // 添加日志便于调试
  uni.navigateTo({
    url: '/pages/calendar/index'
  })
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #000;
  padding: 20rpx;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  
  .date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    
    .current-date {
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .calendar-btn {
      width: 40rpx;
      height: 40rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .calendar-float-btn {
    position: fixed;
    right: 40rpx;
    bottom: 240rpx;
    width: 100rpx;
    height: 100rpx;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100; // 添加z-index确保按钮可点击
    
    image {
      width: 50rpx;
      height: 50rpx;
    }
  }
  
  .timeline-list {
    height: calc(100vh - 180rpx);
    padding-bottom: 240rpx;
    box-sizing: border-box;
    
    .timeline-item {
      display: flex;
      margin-bottom: 40rpx;
      
      .time-point {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 120rpx;
        
        .time {
          color: rgba(255,255,255,0.6);
          font-size: 24rpx;
          margin-bottom: 10rpx;
        }
        
        .point {
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background: #fff;
          z-index: 1;
        }
        
        .line {
          width: 2rpx;
          height: 100%;
          background: rgba(255,255,255,0.2);
          margin-top: -8rpx;
        }
      }
      
      .content-card {
        flex: 1;
        background: rgba(255,255,255,0.1);
        border-radius: 16rpx;
        padding: 20rpx;
        margin-left: 20rpx;
        
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;
          
          .title {
            color: #fff;
            font-size: 28rpx;
            font-weight: bold;
          }
          
          .location {
            color: rgba(255,255,255,0.6);
            font-size: 24rpx;
          }
        }
        
        .card-content {
          margin-bottom: 16rpx;
          
          .description {
            color: rgba(255,255,255,0.8);
            font-size: 26rpx;
            line-height: 1.6;
          }
        }
        
        .card-footer {
          display: flex;
          flex-wrap: wrap;
          gap: 12rpx;
          
          .tag {
            background: rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.6);
            font-size: 22rpx;
            padding: 4rpx 12rpx;
            border-radius: 20rpx;
          }
        }
      }
    }
  }
  
  .add-btn {
    position: fixed;
    right: 40rpx;
    bottom: 120rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.3);
    
    .plus {
      color: #fff;
      font-size: 48rpx;
      font-weight: 300;
    }
  }
}
</style>
